<template>
  <Layout>
    <Breadcrumb :style="{margin: '10px 0'}">
      <BreadcrumbItem>文件管理</BreadcrumbItem>
      <BreadcrumbItem>文件审核</BreadcrumbItem>
    </Breadcrumb>
    <Content>

      <Row :style="{margin:'10px 0'}" :gutter="5" >
        <i-col span="14">
          <ButtonGroup>
            <Button v-if="CD_.btn_List.remove_btn"  icon="md-trash" type="error" @click="remove_modal = true">删除</Button>
          </ButtonGroup>
          <Button  v-if="CD_.btn_List.audit_btn"  icon="md-checkbox-outline" type="info" @click="list_audit_file('Enable')">批量审核</Button>
          <Button  v-if="CD_.btn_List.unaudit_btn"  icon="md-checkbox-outline" type="warning" @click="list_audit_file('Disable')">批量反审核</Button>
          <Button  v-if="CD_.btn_List.edit_btn"  icon="md-checkbox-outline" type="primary" @click="modal_file_mobile = true">移动文件</Button>
        </i-col>
        <i-col span="4" style="margin-top:1px">
          <Cascader :data="class_data"  v-model="ClassActive"   filterable placeholder="请选择文件分类" @on-change="search_class" change-on-select  ></Cascader>
        </i-col>
        <i-col span="6">
          <i-input v-model="search_value" placeholder="文件名称">
            <Button slot="append" icon="ios-search" @click="search_data"></Button>
          </i-input>
        </i-col>
      </Row>

      <Table height="713" :columns="columns" :data="table_data" @on-selection-change="selected_item"></Table>
      <div style="float: right ; margin: 10px">
        <Page :total="page.page_total"
              :page-size="page.page_size"
              :current="page.page_current"
              :page-size-opts="[14,20,30,40,50]"
              size="small" show-elevator show-sizer
              @on-change="change_page"
              @on-page-size-change="change_page_size"></Page>
      </div>
    </Content>


    <!--移动文件-->
    <Drawer
      title="移动文件"
      v-model="modal_file_mobile"
      width="1000">
      <Form ref="formItem_copy_mobile" :model="copy_mobile_file"  :label-width="80">

        <FormItem label="移动文件夹" >
          <Cascader :data="class_data" v-model="copy_mobile_file.and_class" change-on-select filterable  placeholder="请选择文件分类"></Cascader>
        </FormItem>
        <FormItem label="目标文件夹" >
          <Cascader :data="class_data" v-model="copy_mobile_file.end_class" change-on-select filterable  placeholder="请选择文件分类"></Cascader>
        </FormItem>

        <FormItem>
          <Button type="primary" :loading="isLoading" @click="copy_data('copy_mobile_file')">复制</Button>
          <Button type="warning" :loading="isLoading" @click="mobile_data('copy_mobile_file')">移动</Button>
        </FormItem>
      </Form>
      <Divider orientation="left">说明</Divider>
      <p>移动文件功能 可以将【移动文件夹】中的文件一次性 移动或者复制 【目标文件夹】</p>
    </Drawer>


    <Drawer
      title="编辑文件"
      v-model="modal_edit"
      width="1020">
      <Form ref="formItem_edit" :model="formItem_edit" :rules="ruleValidate_edit" :label-width="70">
        <FormItem label="文件名称" prop="file_name">
          <Input v-model.trim="formItem_edit.file_name"  placeholder="请输入文件名称" />
        </FormItem>
        <FormItem label="文件分类" >
          <Cascader :data="class_data" v-model="formItem_edit.class_list_id" change-on-select filterable @on-change="change_class" placeholder="请选择文件分类"></Cascader>
        </FormItem>
        <FormItem label="备注" prop="description">
          <Input v-model.trim="formItem_edit.description" type="textarea" :rows="4" placeholder="备注" />
        </FormItem>
        <FormItem>
          <Button type="primary" :loading="isLoading" @click="edit_data('formItem_edit')">确认提交</Button>
        </FormItem>
      </Form>
    </Drawer>
    <Drawer
      title="文件详情"
      v-model="modal_view"
      width="420">
      <Timeline>
        <TimelineItem>
          <p class="time user_text">基本信息</p>
          <div class="demo-drawer-profile">
            <div class="ivu-row">
              <div class="ivu-col ivu-col-span-24">
                文件名称: {{formItem_view.file_name}}
              </div>
              <div class="ivu-col ivu-col-span-24">
                文件编号: {{formItem_view.file_number}}
              </div>
              <div class="ivu-col ivu-col-span-24">
                文件类型: {{formItem_view.file_class}}
              </div>
              <div class="ivu-col ivu-col-span-24">
                文件地址: {{formItem_view.file_src}}
              </div>
              <div class="ivu-col ivu-col-span-24">
                描述: {{formItem_view.description}}
              </div>
              <div class="ivu-col ivu-col-span-24">
                上传日期: {{formItem_view.date}}
              </div>
              <div class="ivu-col ivu-col-span-24">
                审核状态: {{formItem_view.state === 'Disable'?'未审核':'已审核'}}
              </div>
            </div>
          </div>
        </TimelineItem>
        <TimelineItem>
          <p class="time user_text">上传人信息</p>
          <div class="demo-drawer-profile">
            <div class="ivu-row">
              <div class="ivu-col ivu-col-span-12">
                姓名: {{formItem_view.user_name}}
              </div>
              <div class="ivu-col ivu-col-span-12">
                电话: {{formItem_view.user_mobile}}
              </div>
              <div class="ivu-col ivu-col-span-12">
                角色: {{formItem_view.user_role}}
              </div>
              <div class="ivu-col ivu-col-span-12">
                项目: {{formItem_view.user_department}}
              </div>
            </div>
          </div>
        </TimelineItem>
      </Timeline>

    </Drawer>

    <!--删除提示-->
    <Modal v-model="remove_modal" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>您即将删除这选中的文件，确认删除吗?</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long  :loading="modal_loading"  @click="remove_data">删除</Button>
      </div>
    </Modal>
  </Layout>
</template>

<script>
  export default {
    name: 'Role',
    data() {
      const validateData = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('Age cannot be empty'));
        }
        // 请求后台
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/Role/validateData',
          data: {
            value: value,
            field: rule.field,
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status == 1) {
            return callback();
          } else {
            switch (rule.field) {
              case 'name':
                return callback(new Error('文件名称已存在'));
                break;
            }
          }

        }.bind(this)).catch(function (err) {
          return callback(new Error('输入内容校验失败'));
        }.bind(this))
      };
      return {
        search_value: '',//搜索框内容
        search_select: 'loginname',//搜索的类型
        modal_audit: false,//审核
        modal_edit: false,//添加弹窗
        remove_modal: false,//删除确认窗口
        modal_loading: false,//删除loading
        modal_view: false,//添加弹窗
        modal_file_mobile: false,//移动文件
        selectd_ids: [],//选中的id
        calss_list: [],//选中的文件

        ClassActive:[],
        isLoading: false,//提交数据时按钮的loading效果
        page: {
          page_current: 1,//分页显示第几页
          page_total: 40,//分页总条数
          page_size: 14,//每页多少条
        },
        role_list:[],// 角色数组
        department_list:[],// 项目数组
        class_data: [{
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'gugong',
              label: '故宫'
            },
            {
              value: 'tiantan',
              label: '天坛'
            },
            {
              value: 'wangfujing',
              label: '王府井'
            }
          ]
        }],//文件
        copy_mobile_file: {//移动文件
          and_class:[],
          end_class:[]
        },
        formItem_view: {
          class_id: 24 ,
          class_list_id: [] ,
          class_title: "" ,
          date: "" ,
//          department_dow: "" ,
//          department_dow_list: [] ,
//          department_view: "20" ,
//          department_view_list: [] ,
          description: "" ,
          file_class: "" ,
          file_name: "" ,
          file_number: "" ,
          file_src: "" ,
          id: 13 ,
//          role_dow: "" ,
//          role_dow_list: [] ,
//          role_view: "" ,
//          role_view_list: [] ,
          state: "" ,
          user_department: "" ,
          user_id: 21 ,
          user_mobile: "" ,
          user_name: "" ,
          user_role: "" ,
        },
        formItem_edit: {
          class_id: 24 ,
          class_list_id: [] ,
          class_title: "" ,
          date: "" ,
//          department_dow: "" ,
//          department_dow_list: [] ,
//          department_view: "20" ,
//          department_view_list: [] ,
          description: "" ,
          file_class: "" ,
          file_name: "" ,
          file_number: "" ,
          file_src: "" ,
          id: 13 ,
//          role_dow: "" ,
//          role_dow_list: [] ,
//          role_view: "" ,
//          role_view_list: [] ,
          state: "" ,
          user_department: "" ,
          user_id: 21 ,
          user_mobile: "" ,
          user_name: "" ,
          user_role: "" ,
        },
        ruleValidate_edit: {
          file_name: [
            {required: true, message: '请输入文件名称', trigger: 'blur'},
          ]
        },
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '文件编号',
            key: 'file_number'
          },
          {
            title: '文件名称',
            key: 'file_name'
          },
          {
            title: '文件类型',
            key: 'file_class'
          },
          {
            title: '文件地址',
            key: 'file_src',
            tooltip: true
          },
          {
            title: '文件分类',
            key: 'class_title'
          },
          {
            title: '审核状态',
            key: 'state',
            render: (h, params) => {
              const row = params.row;
              const color = row.state === 'Disable' ? 'warning' : 'success';
              const text = row.state === 'Disable' ? '未审核' : '已审核';

              return h('Tag', {
                props: {
                  type: 'dot',
                  color: color
                }
              }, text);
            }
          },
          {
            title: '上传时间',
            key: 'date'
          },
          {
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 270,
            render: (h, params) => {
              const row = params.row;
              const text = row.state === 'Disable' ? '审核' : '反审核';
              const color = row.state === 'Disable' ? 'info' : 'warning';
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    display:this.CD_.btn_List.audit_btn?"inline-block":"none",
                  },
                  on: {
                    click: () => {
                      this.audit_file(params.row)
                    }
                  }
                }, '审核'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    display:this.CD_.btn_List.unaudit_btn?"inline-block":"none",
                  },
                  on: {
                    click: () => {
                      this.audit_file(params.row)
                    }
                  }
                }, '反审核'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    display:this.CD_.btn_List.edit_btn?"inline-block":"none",
                  },
                  on: {
                    click: () => {
                      this.updata_user(params.row)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    display:this.CD_.btn_List.view_btn?"inline-block":"none",
                  },
                  on: {
                    click: () => {
                      this.view_user(params.row)
                    }
                  }
                }, '详情'),
                h('Button', {
                  props: {
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.file_view(params.row)
                    }
                  }
                }, '查看')
              ]);
            }
          }
        ],
        table_data: []
      }
    },
    methods: {
      file_view(data) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:55
        *=======================================================
        *@function  查看文件
        *=====================================================*/
        this.$router.push({
          path:'./fileview',
          query:{
            file_id:data.id}
        }) ;


      },
      handleReset (name) {
        //重置表单
        this.$refs[name].resetFields();
      },
      change_class(value,selectedData ){
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/23 17:26
        *=======================================================
        *@function  选择类别
        *=====================================================*/
        if(selectedData.length > 0 ){
          this.formItem_edit.class_id = value[value.length-1] ;
          this.formItem_edit.class_title = selectedData[selectedData.length-1].label ;
        }else {
          this.formItem_edit.class_id = '' ;
          this.formItem_edit.class_title = '' ;
        }
      },
      search_class(value, selectedData){
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/23 17:26
        *=======================================================
        *@function  选择类别
        *=====================================================*/
        this.ClassActive = value ;
        this.getRole_data();
      },
      selected_item(data) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 16:41
        *=======================================================
        *@function  选中内容时触发
        *
        * data 为已选内容
        *=====================================================*/
        this.selectd_ids = data.map(function (item) {
          if (item != null && item != undefined) {
            return item.id
          }
        }).join();//需要删除的id

      },
      change_page(page) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 17:18
        *=======================================================
        *@function  选择页数时触发
        * page  当前选择的页数
        *=====================================================*/
        this.page.page_current = page
        this.getRole_data();
      },
      change_page_size(page_size) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 17:18
        *=======================================================
        *@function  选择每页多少条时触发
        * page_size  当前每页多少条
        *=====================================================*/
        this.page.page_size = page_size
        this.getRole_data();
      },
      search_data() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 18:30
        *=======================================================
        *@function  搜索内容
        *=====================================================*/
        this.getRole_data();

      },
      remove_data() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/10 15:18
        *=======================================================
        *@function  删除文件
        *=====================================================*/
        if (this.selectd_ids.length > 0) {
          this.modal_loading = true;
          this.$http({
            method: 'post',
            url: this.CD_.qj_url + 'index/File/removeFile',
            data: {
              selectd_ids: this.selectd_ids
            }
          }).then(function (res) {
            var json = res.data;
            if (json.status == 1) {
              this.modal_loading = false ;
              this.remove_modal = false ;
              this.$Notice.success({title: '成功删除文件~~'});
              this.getRole_data();
            } else {
              this.$Notice.error({title: '删除文件失败~~'});
            }

          }.bind(this)).catch(function (err) {
            this.$Notice.error({title: '删除文件失败，错误：' + err});
          }.bind(this))
        } else {
          this.$Notice.warning({
            title: '请勾选要删除的文件~~',
          });
        }

      },
      audit_file(data){
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/15 16:52
        *=======================================================
        *@function  审核文件
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/File/auditFile',
          data: {
            state: data.state == 'Disable' ? 'Enable' : 'Disable' ,
            id: data.id
          }
        }).then(function (res) {
          var json = res.data
          if (json.status) {
            this.$Notice.success({title: json.msg});
            this.getRole_data();
          } else {
            this.$Notice.error({title:  json.msg});
          }
          this.isLoading = false;
        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '审核失败',desc:'错误：'+ err});
          this.isLoading = false;
        }.bind(this))
      },
      list_audit_file(state){
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/15 16:52
        *=======================================================
        *@function  批量审核文件
        *=====================================================*/

        if (this.selectd_ids.length > 0) {
          this.$http({
            method: 'post',
            url: this.CD_.qj_url + 'index/File/auditListFile',
            data: {
              state: state ,
              selectd_ids: this.selectd_ids
            }
          }).then(function (res) {
            var json = res.data
            if (json.status) {
              this.$Notice.success({title: json.msg});
              this.getRole_data();
            } else {
              this.$Notice.error({title:  json.msg});
            }
            this.isLoading = false;
          }.bind(this)).catch(function (err) {
            this.$Notice.error({title: '审核失败',desc:'错误：'+ err});
            this.isLoading = false;
          }.bind(this))
        }else {
          this.$Notice.warning({
            title: '请勾选要审核的文件~~',
          });
        }

      },
      updata_user(data) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:55
        *=======================================================
        *@function  编辑文件
        *=====================================================*/
        this.formItem_edit = data;

        for(var i=0 ; i < this.formItem_edit.class_list_id.length;i++)
        {
          this.formItem_edit.class_list_id[i] = parseInt(data.class_list_id[i]);
        }
        this.modal_edit = true;
      },
      view_user(data) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:55
        *=======================================================
        *@function  查看文件
        *=====================================================*/
        this.formItem_view = data;

        this.modal_view = true;
      },
      edit_data(data) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:55
        *=======================================================
        *@function  编辑文件
        *=====================================================*/
        console.log(this.formItem_edit)

        this.$refs[data].validate((valid) => {
          if (valid) {
            this.$http({
              method: 'post',
              url: this.CD_.qj_url + 'index/File/edit_file',
              data: {
                formItem: JSON.stringify(this.formItem_edit),
              }
            }).then(function (res) {
              var json = res.data
              if (json.status) {
                this.$Notice.success({title: '编辑成功~~~'});

                this.modal_edit = false;
              } else {
                this.$Notice.error({title: '编辑失败~~'});
              }
              this.isLoading = false;
            }.bind(this)).catch(function (err) {
              this.$Notice.error({title: '编辑删除，错误：',desc:'错误：'+ err});
              this.isLoading = false;
            }.bind(this))
          }
        })
      },
      copy_data(data) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:55
        *=======================================================
        *@function  复制文件
        *=====================================================*/
        console.log(this.copy_mobile_file)

        if (this.copy_mobile_file.and_class.length>0 && this.copy_mobile_file.end_class.length>0 ) {
          this.$http({
            method: 'post',
            url: this.CD_.qj_url + 'index/File/copy_file',
            data: {
              formItem: JSON.stringify(this.copy_mobile_file),
            }
          }).then(function (res) {
            var json = res.data
            if (json.status) {
              this.$Notice.success({title: json.msg});

              this.getRole_data() ;//刷新数据

              this.modal_edit = false;
            } else {
              this.$Notice.error({title: json.msg});
            }
            this.isLoading = false;
          }.bind(this)).catch(function (err) {
            this.$Notice.error({title: '复制文件删除，错误：',desc:'错误：'+ err});
            this.isLoading = false;
          }.bind(this))
        }else {
          this.$Notice.error({title: '未正确选择文件夹'});
        }
      },
      mobile_data(data) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:55
        *=======================================================
        *@function  移动文件
        *=====================================================*/
        console.log(this.copy_mobile_file)

        if (this.copy_mobile_file.and_class.length>0 && this.copy_mobile_file.end_class.length>0 ) {
          this.$http({
            method: 'post',
            url: this.CD_.qj_url + 'index/File/mobile_file',
            data: {
              formItem: JSON.stringify(this.copy_mobile_file),
            }
          }).then(function (res) {
            var json = res.data
            if (json.status) {
              this.$Notice.success({title: json.msg});

              this.getRole_data() ;//刷新数据

              this.modal_edit = false;
            } else {
              this.$Notice.error({title: '文件移动失败~~'});
            }
            this.isLoading = false;
          }.bind(this)).catch(function (err) {
            this.$Notice.error({title: '移动文件删除，错误：',desc:'错误：'+ err});
            this.isLoading = false;
          }.bind(this))
        }else {
          this.$Notice.error({title: '未正确选择文件夹'});
        }
      },
      getRole_data() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:36
        *=======================================================
        *@function  获取初始化信息、搜索、分页
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/File/getFile',
          data: {
            search_value: this.search_value,
            class_id: this.ClassActive[this.ClassActive.length-1],
            user_id: this.CD_.user_Data.id,
            page_current: this.page.page_current,
            page_size: this.page.page_size
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            this.table_data = json.file_data;
            this.page = json.page;
            this.$Loading.finish();
          } else {
            this.table_data = [] ;
            this.$Notice.error({title: '没有需要审核的文件~~~'});
            this.$Loading.error();
          }


        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '初始化数据失败，错误：' + err});
        }.bind(this))
      },
      getSelsct(){
        /*======================================================
        *@author wf_Huang
        *@Time ] 11:50
        *=======================================================
        *@function 初始化数据
        *=====================================================*/
        this.$http({
          method: 'get',
          url: this.CD_.qj_url + 'index/Treeclass/csh_RDC',
        }).then(function (res) {
          var json = res.data
          if (json.status) {
            this.class_data = json.class_list ;
          } else {
            this.$Notice.error({title: '文件查询，错误：'+res.msg});
          }
          this.isLoading = false;
        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '文件查询，错误：',desc:'错误：'+ err});
          this.isLoading = false;
        }.bind(this))

      },
      getSelsct(){
        /*======================================================
        *@author wf_Huang
        *@Time ] 11:50
        *=======================================================
        *@function 初始化数据
        *=====================================================*/
        this.$http({
          method: 'get',
          url: this.CD_.qj_url + 'index/Treeclass/csh_RDC',
        }).then(function (res) {
          var json = res.data
          if (json.status) {
            this.class_data = json.class_list ;
          } else {
            this.$Notice.error({title: '文件查询，错误：'+res.msg});
          }
          this.isLoading = false;
        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '文件查询，错误：',desc:'错误：'+ err});
          this.isLoading = false;
        }.bind(this))

      }

    },
    mounted() {
      this.getRole_data();
      this.getSelsct();
    }
  }
</script>

<style scoped>
  .user_text{
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85098);
    line-height: 18px;
    display: block;
    margin-bottom: 16px;
  }
  .ivu-col{
    font-size: 14px;
    line-height: 35px;
  }
</style>
